/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	
	<view>
		<block v-for="(item,index) in express" :key="index">
			<view class="logistics-mes">
				<view class="logistics-num">
					<view class="logistics-title">订单编号 : </view>
					<view class="logistics-cont">{{item.order_sn}}</view>
				</view>
				<view class="logistics-num">
					<view class="logistics-title">国内承运人 : </view>
					<view class="logistics-cont">{{item.shipping_name}}</view>
				</view>
			</view>
			<view class="apply-state" v-if="delivery">
				<view class="state-item" >
					<view class="item-wrap" v-for="(item,index) in delivery" :key="index">
						<view class="state-title">{{item.AcceptStation}}</view>
						<view class="state-time">{{item.AcceptTime}}</view>
					</view>
					
				</view>
			</view>
			<view class="state" v-if="!delivery">
				{{error}}
			</view>
		</block>
	</view>
	
</template>

<script>
	import {getExpress,getOrderInfo,getLogistics} from "@/api/api.js";
	import {mapState} from 'vuex';
	import common from "@/common/common.js"
	export default {
		data() {
			return {
				delivery:"",//物流信息
				 logistics_order:"",//物流 信息
				delivery_id:[],//订单
				express:"",
				error:"",//
				express_express_switch:1,//快递鸟
			};
		},
		onLoad(options){
			console.log(options)
			let params={
				order_id:options.order_id
			}
			this.getLogistics(params)
			this.express_express_switch=this.config.express_express_switch;
		},
		computed: {
			...mapState(['config']),
		},
		methods:{
			/*发货单*/ 
			getLogistics(params){
				getLogistics(params).then(res=>{
					console.log(res)
					if(res.length>0){
						
						
						this.express=res;
					}	

				}).then(()=>{
					this.express.map(item=>{
						let params={
							shipping_code:item.shipping_code,
							invoice_no:item.invoice_no, //550000628365451,//
							mobile:item.mobile
						}
						this.getExpress(params)
						
					})
					
				})
			},
			getExpress(params){
				getExpress(params).then(res=>{
					console.log(res)

					if(this.express_express_switch==1){ //快递鸟
						
						if(res.Success){
							if(res.Traces.length>0){
								this.delivery=res.Traces;
							}else{
								this.error=res.Reason
							}
							
						}else{
							this.error=res.Reason
						}
					}
					if(this.express_express_switch==0){ //快递100
						if(res.result){
							if(res.data.length>0){
								let express=new Array;
								res.data.map(item=>{
									let obj= new Object;
									obj.AcceptStation=item.context;
									obj.AcceptTime=item.ftime;
									this.delivery.push(obj)
								})
							}else{
								this.error="暂无轨迹信息"
							}
						}else{
							this.error=res.message;
						}
					}
				})
			}
			
		}
	}
</script>

<style lang="scss">
/* express.wxss */
.logistics-mes{
    padding: 20rpx 30rpx;
    background-color: #fff;
}
.logistics-num{
    display: flex;
    line-height: 48rpx;
    font-size: 28rpx; 
}
.logistics-title{
    color: #666;
    margin-right: 20rpx;
}
.logistics-cont{
    color: #333;
}
.apply-state{
    margin-top: 20rpx;
    background-color: #fff;
    padding-left: 50rpx;
    padding-top: 60rpx;
}
.state-item{
    border-left: 1px solid #f3f3f3;
    padding-left: 40rpx;
}
.item-wrap{
    position: relative;
    margin-bottom:20rpx;
    padding-bottom:20rpx;
    border-bottom: 1px solid #f3f3f3;
    font-size: 24rpx;
    color: #aaa;
    line-height: 1;
}
.item-wrap::before{
    content: '';
    position: absolute;
    left:-61rpx;
    top: 0;
    width: 26rpx;
    height: 26rpx;
    border-radius: 50%;
    background-color: #ff3b3b;
    border:4px solid #ed8182;
}
.state-title{
    font-size: 28rpx;
    font-weight: bold;
    color: #666;
    padding-bottom:20rpx; 
}
.state{
	margin-top: 20rpx;
	color: #333;
	font-size: 24rpx;
	text-align: center;
}
</style>
